<template>
  <div class="matrix-view-chart">
    <div class="actions">
      <el-select v-model="dimension" placeholder="请选择维度" @change="onDimensionChange">
        <el-option v-for="item in dimensions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
      </el-select>
      <el-select v-model="chartType" placeholder="请选择图表类型" class="ml-4" @change="onChartTypeChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="wrapper">
      <matrix-view ref="matrixView" :matrix-id="matrixId" :panel-id="panelId" :show-position="chartType" />
    </div>
  </div>
</template>
<script>
import MatrixView from '@/components/vis/matrix/view'

export default {
  components: { MatrixView },
  provide() {
    return {
      chartViewGetXaxisFunc: this.getViewXaxis,
    }
  },
  props: {
    matrix: { type: Object, default: () => ({}) },
    origin: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      dimension: '',
      chartType: '',
      options: [
        { value: 'as:line', label: '折线图' },
        { value: 'as:bar', label: '柱状图' },
        { value: 'as:pie', label: '饼图' },
      ],
      xaxis: [],
    }
  },
  computed: {
    matrixId() {
      return this.matrix.id || this.$route.params.id
    },
    panelId() {
      return this.matrix.panelId || this.$route.query.panelId
    },
    dimensions() {
      let ret = []

      if (this.origin && this.origin.dimensions) {
        ret = this.origin.dimensions.filter((item) => (this.origin.dimension || []).includes(item.id))
      }

      return ret
    },
  },
  watch: {
    origin(val) {
      if (val && val.chartType) {
        this.init()
      }
    },
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.chartType = 'as:' + (this.origin.chartType || 'line')
    },
    onChartTypeChange(val) {
      this.refresh()
    },
    onDimensionChange(val) {
      const origin = this.origin || {}
      this.xaxis = this.dimensions
        .filter((item) => item.id === val)
        .map((item) => ({
          ...item,
          disabled: true,
          formatterCfg: {
            type: 'auto',
            unit: 1,
            suffix: '',
            decimalCount: 2,
            thousandSeparator: true,
          },
          dateStyle: item.id === origin.dateDimension ? origin.dateStyle || 'y_M_d' : '',
          datePattern: 'date_sub',
          sort: 'none',
          filter: [],
        }))
      this.refresh()
    },
    refresh() {
      this.$nextTick(() => {
        this.$refs.matrixView && this.$refs.matrixView.refresh()
      })
    },
    getViewXaxis() {
      return this.xaxis
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-view-chart {
  width: 100%;
  height: 100%;
  .actions {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .wrapper {
    height: calc(100% - 40px);
    width: 100%;
  }
}
</style>
